<template>
  <div class="roadPage">
    <div v-if="BtnSelected == 1" class="navigation">
      <div class="navigation_item">
        <div class="img" @click="FlyTo_bim_position('项目部', 0)">
          <img
            src="../../assets/roadPlan/Navigation/项目部22.jpg"
            style="width: 151px; height: 90px"
          />
        </div>
        <div class="name">项目部</div>
        <div class="img" @click="FlyTo_bim_position('钢筋加工厂', 1)">
          <img
            src="../../assets/roadPlan/Navigation/钢筋加工厂22.jpg"
            style="width: 151px; height: 90px"
          />
        </div>
        <div class="name">钢筋加工厂</div>
        <div class="img" @click="FlyTo_bim_position('陆上拌和站', 2)">
          <img
            src="../../assets/roadPlan/Navigation/陆上拌和站22.jpg"
            style="width: 151px; height: 90px"
          />
        </div>
        <div class="name">陆上拌和站</div>
        <div class="img" @click="FlyTo_bim_position('水上拌和站', 3)">
          <img
            src="../../assets/roadPlan/Navigation/水上拌和站22.jpg"
            style="width: 151px; height: 90px"
          />
        </div>
        <div class="name">水上拌和站</div>
        <div class="img" @click="FlyTo_bim_position('沉井', 4)">
          <img
            src="../../assets/roadPlan/Navigation/沉井.jpg"
            style="width: 151px; height: 90px"
          />
        </div>
        <div class="name">沉井</div>
        <div class="img" @click="FlyTo_bim_position('栈桥', 5)">
          <img
            src="../../assets/roadPlan/Navigation/zhanqiao.png"
            style="width: 151px; height: 90px"
          />
        </div>
        <div class="name">栈桥</div>
        <div class="img" @click="FlyTo_bim_position('试验室', 6)">
          <img
            src="../../assets/roadPlan/Navigation/试验室22.jpg"
            style="width: 151px; height: 90px"
          />
        </div>
        <div class="name">试验室</div>

        <div class="img" @click="FlyTo_bim_position('钢结构加工厂', 7)">
          <img
            src="../../assets/roadPlan/Navigation/gangjiegou.png"
            style="width: 151px; height: 90px"
          />
        </div>
        <div class="name">钢结构加工厂</div>

        <div class="img" @click="FlyTo_bim_position('监理驻地', 8)">
          <img
            src="../../assets/roadPlan/Navigation/jianli.png"
            style="width: 151px; height: 90px"
          />
        </div>
        <div class="name">监理驻地</div>

        <div class="img" @click="FlyTo_bim_position('产业工人培训中心', 9)">
          <img
            src="../../assets/roadPlan/Navigation/chanye.png"
            style="width: 151px; height: 90px"
          />
        </div>
        <div class="name">产业工人培训中心</div>

        <div class="img" @click="FlyTo_bim_position('料石码头', 10)">
          <img
            src="../../assets/roadPlan/Navigation/liaoshimatou.png"
            style="width: 151px; height: 90px"
          />
        </div>
        <div class="name">料石码头</div>

        <div class="img" @click="FlyTo_bim_position('8#墩提升站', 11)">
          <img
            src="../../assets/roadPlan/Navigation/8tishengzhan.png"
            style="width: 151px; height: 90px"
          />
        </div>
        <div class="name">8#墩提升站</div>

        <div class="img" @click="FlyTo_bim_position('14#-S1#墩提升站', 12)">
          <img
            src="../../assets/roadPlan/Navigation/14tishengzhan.png"
            style="width: 151px; height: 90px"
          />
        </div>
        <div class="name">14#-S1#墩提升站</div>
      </div>
    </div>

    <div
      class="Btn1"
      :style="{ color: BtnSelected == 1 ? '#f3b509' : '#07ffd7' }"
      @click="BtnClick(1)"
    >
      施工场地总体规划
    </div>
    <div
      class="Btn2"
      :style="{ color: BtnSelected == 2 ? '#f3b509' : '#07ffd7' }"
      @click="BtnClick(2)"
    >
      施工道路布置
    </div>
  </div>
</template>

<script>
export default {
  data () {
    this.bimPosition = [
      {
        name: '项目部',
        destination: {
          x: -2705029.6108805514,
          y: 4690654.097374107,
          z: 3359812.533174551
        },
        orientation: {
          heading: 5.524868371118769,
          pitch: -0.8654608926505825,
          roll: 6.279980183733361
        }
      },
      {
        name: '钢筋加工厂',
        destination: {
          x: -2704785.814935603,
          y: 4690684.078043588,
          z: 3359621.7503063553
        },
        orientation: {
          heading: 0.7890966560854062,
          pitch: -0.23047049844553547,
          roll: 0.0021980091850917205
        }
      },
      {
        name: '陆上拌和站',
        destination: {
          x: -2704142.600028466,
          y: 4691908.935143334,
          z: 3358695.3276988454
        },
        orientation: {
          heading: 5.851934857100899,
          pitch: -0.5799262669773846,
          roll: 6.2816769405860065
        }
      },
      {
        name: '水上拌和站',
        destination: {
          x: -2704058.674074261,
          y: 4690385.765367225,
          z: 3360720.3037149804
        },
        orientation: {
          heading: 0.6217857715993649,
          pitch: -0.5567632974717407,
          roll: 0.0020712432859602004
        }
      },
      {
        name: '沉井',
        destination: {
          x: -2704123.700776692,
          y: 4690135.619138667,
          z: 3361003.687742617
        },
        orientation: {
          heading: 4.577105190271557,
          pitch: -0.45565121684663135,
          roll: 6.2798597843880195
        }
      },
      {
        name: '栈桥',
        destination: {
          x: -2704103.5799531774,
          y: 4690898.423343822,
          z: 3360437.172385823
        },
        orientation: {
          heading: 0.1894224281163268,
          pitch: -0.5145955890096281,
          roll: 0.0006530353815152878
        }
      },
      {
        name: '试验室',
        destination: {
          x: -2703900.0677684373,
          y: 4691729.932437436,
          z: 3358830.7200734005
        },
        orientation: {
          heading: 0.5129858703910237,
          pitch: -0.4671723134081378,
          roll: 0.0016585012207768202
        }
      },
      {
        name: '钢结构加工厂',
        destination: {
          x: -2704984.9640331515,
          y: 4690354.369103005,
          z: 3359897.815421583
        },
        orientation: {
          heading: 3.928366228952012,
          pitch: -0.2768072845373106,
          roll: 6.280968178416881
        }
      },
      {
        name: '监理驻地',
        destination: {
          x: -2704946.743767598,
          y: 4690427.221241941,
          z: 3359828.469481299
        },
        orientation: {
          heading: 5.459157968495279,
          pitch: -0.5972558208923369,
          roll: 6.280506770559283
        }
      },
      {
        name: '产业工人培训中心',
        destination: {
          x: -2704895.0866789734,
          y: 4690358.1802505525,
          z: 3359944.509804145
        },
        orientation: {
          heading: 3.3452613424422637,
          pitch: -0.5497797196752785,
          roll: 6.282471658520768
        }
      },
      {
        name: '料石码头',
        destination: {
          x: -2704492.3728965865,
          y: 4691375.691066803,
          z: 3358938.817305846
        },
        orientation: {
          heading: 1.7640074167563649,
          pitch: -0.45483123701108763,
          roll: 0.0032909458433545424
        }
      },
      {
        name: '8#墩提升站',
        destination: {
          x: -2703705.121440941,
          y: 4690817.755967394,
          z: 3360433.1682700077
        },
        orientation: {
          heading: 0.3868155067690964,
          pitch: -0.5200704328486521,
          roll: 0.0013123124196674496
        }
      },
      {
        name: '14#-S1#墩提升站',
        destination: {
          x: -2703375.6545302244,
          y: 4691454.621180256,
          z: 3359807.7637853967
        },
        orientation: {
          heading: 5.482505747353214,
          pitch: -0.466663311763563,
          roll: 6.280760506119098
        }
      }
    ]
    return {
      BtnSelected: 0
    }
  },
  inject: ['getViewer', 'handleModelDisplay', 'handleHtmlLabelShow'],
  deactivated () {
    viewer.dataSources._dataSources[0].show = false
    this.BtnSelected = 1
  },
  activated () {
    this.init()
    if (process.env.NODE_ENV === 'development') {
      this.handleModelDisplay([])
    } else {
      this.handleModelDisplay([
        'zhanqiaoTileset',
        // 'chenjingTileset',
        // "ssbhzTileset",
        'lsbhzTileset',
        'xmbTileset',
        // 'zhanqiaoQingXieTileset',
        'tishengzhan8Tileset',
        'tishengzhan14Tileset',
        'liaoshiTileset',
        'cjptTileset',
        'matou13Tileset',
        'zhuqiaoTileset'
      ])
    }
    this.handleHtmlLabelShow([
      {
        type: '1',
        handler: (event) => {
          const { Text } = event.target.params
          this.FlyTo_bim_position(Text)
        }
      }
    ])
  },
  methods: {
    init () {
      this.BtnSelected = 1
      console.log(this.BtnSelected)
      const viewer = this.getViewer()
      viewer.camera.flyTo({
        destination: {
          x: -2706623.7614706857,
          y: 4695132.6479051495,
          z: 3362242.9503082065
        },
        orientation: {
          heading: 6.154751675417177,
          pitch: -1.4521320704408618,
          roll: 6.279841206921715
        }
      })
      // 施工便道
      this.kmlOptions = {
        camera: viewer.scene.camera,
        canvas: viewer.scene.canvas,
        clampToGround: true
      }
      viewer.dataSources
        .add(
          Cesium.KmlDataSource.load(
            'http://58.49.74.231:114/sandTable_changtai/data/kml/biandao.kml',
            this.kmlOptions
          )
        )
        .then(function (dataSource) {
          dataSource.show = false
        })
    },

    BtnClick (num) {
      viewer.camera.flyTo({
        destination: {
          x: -2706623.7614706857,
          y: 4695132.6479051495,
          z: 3362242.9503082065
        },
        orientation: {
          heading: 6.154751675417177,
          pitch: -1.4521320704408618,
          roll: 6.279841206921715
        }
      })
      this.BtnSelected = num
      if (num === 1) {
        viewer.dataSources._dataSources[0].show = false
      }
      if (num === 2) {
        viewer.dataSources._dataSources[0].show = true
      }
    },

    FlyTo_bim_position (name, index) {
      if (name === '14#墩提升站' || name === 'S1#墩提升站') {
        viewer.camera.flyTo({
          destination: this.bimPosition[this.bimPosition.length - 1].destination,
          orientation: this.bimPosition[this.bimPosition.length - 1].orientation
        })
        return
      }
      for (var i = 0; i < this.bimPosition.length; i++) {
        if (this.bimPosition[i].name === name) {
          viewer.camera.flyTo({
            destination: this.bimPosition[i].destination,
            orientation: this.bimPosition[i].orientation
          })
        }
      }
    }
  }
}
</script>

<style lang="less">
.roadPage {
  pointer-events: none;
  .navigation {
    position: fixed;
    // display: none;
    right: calc(2% + 10px);
    top: calc((100% - 750px) / 2);
    z-index: 10;
    padding: 10px 10px;
    width: 170px;
    height: 700px;
    overflow-y: auto;
    background: url("../../assets/roadPlan/导航栏.png") no-repeat;
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    .navigation_item {
      pointer-events: all;
      height: 97%;
      overflow-y: scroll;
      white-space: nowrap;
      overflow-x: hidden;
      margin-top: 12px;
      .img {
        margin: 5px 3px 0px 3px;
        cursor: pointer;
      }
      .name {
        margin: 1px;
        font-size: 14px;
        text-align: center;
      }
    }
  }

  .Btn1 {
    pointer-events: all;
    position: fixed;
    left: calc(50% - 300px);
    bottom: 40px;
    width: 220px;
    height: 34px;
    font-size: 16px;
    font-weight: bold;
    line-height: 29px;
    color: #07ffd7;
    text-align: center;
    background: #233037;
    border: solid 2px #6bb49f;
    user-select: none;
    cursor: pointer;
    z-index: 101;
  }
  .Btn2 {
    pointer-events: all;
    position: fixed;
    right: calc(50% - 300px);
    bottom: 40px;
    width: 220px;
    height: 34px;
    font-size: 16px;
    font-weight: bold;
    line-height: 29px;
    color: #07ffd7;
    text-align: center;
    background: #233037;
    border: solid 2px #6bb49f;
    user-select: none;
    cursor: pointer;
    z-index: 101;
  }
}
</style>
